import React, { PureComponent } from 'react';
import { Modal, Form, Input, Row } from 'antd';
import lodash from 'lodash';
// import classNames from 'classnames';
// import styles from './UrlFilterModal.less'

@Form.create()
export default class UrlFilterModal extends PureComponent {

  // 点击确定按钮
  onOk = () => {
    const { form, onOk } = this.props;
    if (!(onOk instanceof Function)) return;
    const formValues = form.getFieldsValue();
    let { urlFilterStr } = formValues;
    if (!urlFilterStr || lodash.trim(urlFilterStr) === "") {
      onOk({ ...formValues, urlFilterStr: undefined }, this.reset);
    }
    let urls = lodash.split(urlFilterStr, '\n');
    const urlTmp = [];
    // 第一步去首尾空格
    urls.forEach(url => {
      urlTmp.push(lodash.trim(url));
    });
    // 第二步去重复
    urls = [];
    urlTmp.forEach(url => {
      if (url !== '' && lodash.indexOf(urls, url) === -1) {
        urls.push(url);
      }
    });
    // 返回
    urlFilterStr = urls.join('\n');
    onOk({ ...formValues, urlFilterStr }, this.reset);
    // form.validateFields((err, formValues) => {
    //   if (err) return;
    // });
  }

  // 重置页面
  reset = () => {
    const { form } = this.props;
    form.resetFields();
  }

  render() {
    const { urlFilterStr, visible, confirmLoading, onCancel, form } = this.props;
    const { getFieldDecorator } = form;
    const placeholder ='一行一个url，系统自动删除首尾空格，例如：\n\n/api/cart/queryCartInfo.json\n/api/goods/goodsDetails.json\n/merchant/b2bedit.htm\n';
    return (
      <Modal width={700} title="输入需要统计的Url" confirmLoading={confirmLoading} visible={visible} onCancel={onCancel} onOk={this.onOk} okText="确认" cancelText="取消" maskClosable={true}>
        <Form layout="inline">
          <Row gutter={{ md: 12, lg: 12, xl: 12 }}>
            <Form.Item>
              {getFieldDecorator('urlFilterStr', {
                initialValue: urlFilterStr,
                rules: [
                  // { required: true, whitespace: true, message: 'Url路径不能是空' },
                ],
              })(
                <Input.TextArea
                  rows={18}
                  autosize={{ minRows: 12, maxRows: 24 }}
                  style={{ width: 650, maxWidth: 650 }}
                  placeholder={placeholder}
                />
              )}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }
}
